<template>
  <div class="mp-comment-container border-bottom">
    <h3 class="mp-comment-title border-bottom">用户评论</h3>
    <div class="mp-comment-list">
      <div class="mp-comment-item border-bottom">
        <img src="//s.qunarzz.com/piao/image/touch/sight/highQualityComment1.png" alt="">
        <div class="mp-comment-stardate">
          <span class="mpf-starlevel">
            <i class="mpf-starlevel-gain">★★★★★</i>
          </span>
          <span class="mp-comment-date">
            随*啊  2017-12-30
          </span>
        </div>
        <p class="mp-comment-content">
          参观故宫是来京必须要安排的行程，紫禁城的宏伟和惊艳超乎你想象，假装自己穿越时空，
          你走在乾隆皇帝走过的石板砖上，体验当年盛世的文化底蕴和奢华的生活～ 攻略1 提前网上购买门票，
          凭身份证直接进 攻略2 租讲解器，每个讲解器都是感应的，每个只讲解一遍，只有一个耳机，
          别想着两人共用的好事儿，哈哈哈 攻略3 周一闭馆，周末人居多，尽量安排工作日，
          若所有宫殿都想参观，就提早进去，不过我个人觉得没必要，参观代表性的中轴和个别妃子和慈禧的宫殿即可，
          建议预留至少大半天时间在里头 再来北京，还愿意去故宫~~
        </p>
        <div class="mp-comment-foldbtn">
          <div class="iconfont tubiao">&#xe61a;</div>
          <div class="iconfont tubiao">&#xe619;</div>
        </div>
      </div>
      <div class="mp-comment-item border-bottom">
        <div class="mp-comment-stardate">
          <span class="mpf-starlevel">
            <i class="mpf-starlevel-gain">★★★★★</i>
          </span>
          <span class="mp-comment-date">
            o*6  2019-07-14
          </span>
        </div>
        <p class="mp-comment-content">
          我们是早上8:30的第一场，有珍宝馆的套票，王蕾导游讲解很到位，妙语连珠，互动性强，服务热情，
          路线和讲解安排合理，游玩很开心有意义，对故宫有了深入全面的了解，不虚此行，不留遗憾，深有体会，
          故宫博物院完美打卡。
        </p>
        <div class="mp-comment-foldbtn">
          <div class="iconfont tubiao">&#xe61a;</div>
          <div class="iconfont tubiao">&#xe619;</div>
        </div>
      </div>
    </div>
    <div class="mp-more-refresh border-top">
      查看全部评论
    </div>
  </div>
</template>

<script>
</script>

<style lang="stylus" scoped="scoped">
  .mp-comment-container
    margin-top 0.2rem
    .mp-comment-title
      padding 0 .2rem
      height .88rem
      background #fff
      color #333
      font-size .3rem
      line-height .88rem
      text-indent .2rem
    .mp-comment-list
      background-color #FFFFFF
      position relative
      .mp-comment-item
        padding .1rem .2rem .3rem .2rem
        img
          position absolute
          top .2rem
          right .2rem
          width 1.42rem
          height .96rem
        .mp-comment-stardate
          margin-top .1rem
          line-height .6rem
          .mpf-starlevel
            display: inline-block
            position: relative
            width: 1.5rem
            height: .28rem
            line-height: .28rem
            font-size: .28rem
            letter-spacing: .02rem
            .mpf-starlevel-gain
              z-index: 2
              color: #ffb436
              overflow: hidden
              position: absolute
              top: .04rem
              left: 0
              height: .28rem
          .mp-comment-date
            position: relative
            float: right
            top: .16rem
            margin-left: .2rem
            line-height: .28rem
            font-size: .24rem
            vertical-align: middle
            color: #212121
        .mp-comment-content
          word-break: break-all
          word-wrap: break-word
          line-height: .42rem
          font-size: .26rem
          color: #616161
        .mp-comment-foldbtn
          position relative
          height: .48rem
          line-height: .48rem
          text-align: center
          font-size: .26rem
          color: #9e9e9e
          .tubiao
            position absolute
            top 0.1rem
            left 0rem
            right 0rem
            bottom 0rem
            font-size 0.48rem
    .mp-more-refresh
      position: relative
      margin-top: -.02rem
      height: .8rem
      background: #fff
      color: #616161
      line-height: .8rem
      text-align: center
      z-index: 2
</style>
